<script setup lang="ts">
// import { PropType } from 'vue'
// js写法
// const props = defineProps({
//   num: {
//     type: Number
//   }
// })
// ts写法
//  ts的withDefaults写法 不推荐
// const props = withDefaults(
//   defineProps<{
//     num?: 0 | 1
//   }>(),
//   {
//     num: 0
//   }
// )
// 推荐写法
const { num = 1 } = defineProps<{
  num?: 0 | 1
}>()
// ts的PropType写法，不推荐，只是在使用validator情况下可使用
// const props = defineProps({
//   num: {
//     type: Number as PropType<0 | 1>,
//     default: 0,
//     validator: value => {
//       return true
//     }
//   }
// })
const emits = defineEmits<{
  (x: 'changeNum', val: 0 | 1): void
}>()
const btnClick = () => {
  console.log(num)
  emits('changeNum', (1 - num) as 0 | 1)
}
</script>

<template>
  <div class="son-page">son---{{ num }}</div>
  <button @click="btnClick">修改num</button>
</template>

<style lang="scss" scoped></style>
